
<template>
    <div class="tubiaoapp">
          <!-- 图表可视化 -->
          <div class="chart" ref="chart1"></div>
    </div>
</template>

<script>
import * as echarts from 'echarts';


    export default{
        data(){
            return {

            }
        },
        mounted(){
            let chart1box = this.$refs.chart1
            // 1·初始化图表
            let chart1=echarts.init(chart1box)
            // 2·图表的配置项
            let option1={
                title: {
                text: '用户来源'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
                }
            },
            legend: {
                data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
            },
            toolbox: {
                feature: {
                saveAsImage: {}
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                type: 'category',
                boundaryGap: false,
                data: ['2017-12-27', '2017-12-28', 'W2017-12-29ed', '2017-12-30', '2017-12-31', '2018-1-1']
                }
            ],
            yAxis: [
                {
                type: 'value'
                }
            ],
            series: [
                {
                name: 'Email',
                type: 'line',
                stack: 'Total',
                areaStyle: {},
                emphasis: {
                    focus: 'series'
                },
                data: [15212, 5800, 10241, 14821, 15982, 15997]
                },
                {
                name: 'Union Ads',
                type: 'line',
                stack: 'Total',
                areaStyle: {},
                emphasis: {
                    focus: 'series'
                },
                data: [9991, 4130, 7777, 12903, 13928, 13078]
                },
                {
                name: 'Video Ads',
                type: 'line',
                stack: 'Total',
                areaStyle: {},
                emphasis: {
                    focus: 'series'
                },
                data: [6888, 4000, 8010, 12321, 6928, 13965]
                },
                {
                name: 'Direct',
                type: 'line',
                stack: 'Total',
                areaStyle: {},
                emphasis: {
                    focus: 'series'
                },
                data: [5090, 2500, 3400, 6000, 5098, 6482]
                },
                {
                name: 'Search Engine',
                type: 'line',
                stack: 'Total',
                label: {
                    show: true,
                    position: 'top'
                },
                areaStyle: {},
                emphasis: {
                    focus: 'series'
                },
                data: [2999, 3111, 4100, 3565, 15982, 3330]
                }
            ]
            }
            //3·设置图标的配置
            chart1.setOption(option1)
        }
    }
</script>

<style lang="scss" scoped>

.tubiaoapp{
    width:100%;
    height:100%;
    .chart{
        width:900px;
        height:500px;
    }
}

</style>